<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>人员位置安全预警系统</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <!-- font Awesome -->
        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <!-- Theme style -->
        <link href="css/AdminLTE.css" rel="stylesheet" type="text/css"/>
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
        <style media="screen">
            /* 菜单的样式 */
            #directory-tree-menu {
                position: absolute;
                top: 0;
                display: none;
                margin: 0;
                padding: 6px 0;
                text-align: left;
                border: 1px solid #BFBFBF;
                border-radius: 3px;
                background-color: #EEE;
                box-shadow: 0 0 10px #AAA;
            }

            #directory-tree-menu li {
                padding: 2px 15px;
                list-style: none outside none;
                cursor: default;
                color: #666;
            }

            #directory-tree-menu li:hover {
                color: #EEE;
                background-color: #666;
            }

            li#menu-item-delete, li#menu-item-rename {
                margin-top: 1px;
            }
        </style>
    </head>
    <body class="skin-green">
        <!-- header logo: style can be found in header.less -->
        <header class="header">
            <div class="logo">
                <div class="logo-img"></div>
                <a href="index.html">
                <!-- Add the class icon to your logo image or logo icon to add the margining -->
                安全预警系统
                </a>
                <a id="beginShow" href="#" class="btn btn-success" style="    position: absolute;
    top: 8px;
    left: 29em;    z-index: 99999;
">开始演示</a>
                <ul id="directory-tree-menu">
                    <li id="menu-item-delete">删除</li>
                    <li id="menu-item-rename">重命名</li>
                </ul>
            </div>
            <!--  顶部导航 Header Navbar: style can be found in header.less -->
            <nav class="navbar navbar-static-top" role="navigation">
                <!-- Sidebar toggle button-->
                <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
                    <span class="sr-only" title="切换左侧导航">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <!--标签页-->
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab">地图</a>
                    </li>
                    <li>
                        <a href="#user" data-toggle="tab">用户</a>
                    </li>
                </ul>
                <!--右边管理员-->
                <span class="navbar-right">
                    <ul class="nav navbar-nav">
                        <!-- User Account: style can be found in dropdown.less -->
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="glyphicon glyphicon-user"></i>
                                <span>
                                    管理员 <i class="caret"></i>
                                </span>
                            </a>
                            <ul class="dropdown-menu">
                                <!-- Menu Footer-->
                                <li class="user-footer">
                                    <!--<div>
                                    <a href="#" class="btn btn-default btn-flat">个人信息</a>
                                </div>-->
                                    <div>
                                        <a id="unlogin" href="#" class="btn btn-default btn-flat">退出登录</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </span>
            </nav>
        </header>
        <div class="tab-content">
            <div class="tab-pane   active" id="home">
                <div class="wrapper row-offcanvas row-offcanvas-left">
                    <!-- Left side column. contains the logo and sidebar -->
                    <aside class="left-side sidebar-offcanvas">
                        <!-- sidebar: style can be found in sidebar.less -->
                        <section class="sidebar">
                            <!-- search form搜索框 -->
                            <!--<form action="#" method="get" class="sidebar-form">
                            <div class="input-group">
                                <input type="text" name="q" class="form-control" placeholder="搜索..." />
                                <span class="input-group-btn">
                                    <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
                                </span>
                            </div>
                        </form>-->
                            <!-- 左侧导航列表  sidebar menu: : style can be found in sidebar.less -->
                            <ul class="sidebar-menu">
                                <li class="active" id="layer">
                                    <a href="">
                                        <i class="fa fa-dashboard"></i>
                                        <span>图层</span>
                                    </a>
                                </li>
                                <li id="people">
                                    <a href="">
                                        <i class="fa fa-th"></i>
                                        <span>人员</span>
                                    </a>
                                </li>
                            </ul>
                            <!--图层树-->
                            <ul id="layerTree" class="ztree"></ul>
                            <!--人员树-->
                            <ul id="peopleTree" style="display:none;" class="ztree">我是人员树</ul>
                        </section>
                        <!-- /.sidebar -->
                    </aside>
                    <!-- Right side column. Contains the navbar and content of the page -->
                    <aside class="right-side">
                        <!-- Main content -->
                        <section>
                            <div id="mapCon" class="mapCon">
                                <!--地图操作-->
                                <div id="mapOp">
                                    <div id="zoomOut" class="mapOp" style="background: url(img/webmap.png) -309px -32px; " title="放大"></div>
                                    <div id="zoomIn" class="mapOp" style="background: url(img/webmap.png) -361px -32px;" title="缩小"></div>
                                    <div id="pan" class="mapOp" style="background: url(img/webmap.png) -306px -129px;" title="移动"></div>
                                    <div id="clear" class="mapOp" style="background: url(img/webmap.png) 99px -76px;" title="清除"></div>
                                    <div id="fullExtent" class="mapOp" style="background: url(img/webmap.png) 151px -32px;" title="全图"></div>
                                    <div id="measureLine" class="mapOp" style="background: url(img/webmap.png) 1027px -83px;" title="量线"></div>
                                    <div id="measureArea" class="mapOp" style="    background: url(img/webmap.png) 203px -32px;" title="量面"></div>
                                </div>
                                <div class="foldmMapOp" id="closeMapOp" style=" background: url(img/webmap.png) 201px -77px white;" title="折叠"></div>
                                <div class="foldmMapOp" id="openMapOp" style="display: none; background: url(img/webmap.png) 148px -77px white;" title="展开"></div>
                                <div id="mapMenu">
                                    <!--添加线图层-->
                                    <!--                                     <div class="btn-group">
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            添加线图层 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#" id='addLayer'>添加人员路径</a>
                                            </li>
                                            <li>
                                                <a href="#" id='undoAdded'>撤销</a>
                                            </li>                                          
                                          
                                            <li>
                                                <a href="#" id='cancelAdd'>退出</a>
                                            </li>
                                        </ul>
                                    </div> -->
                                    <!--编辑安全区图层-->
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            编辑安全区图层 <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#" id='StartEdit'>选择或编辑</a>
                                            </li>
                                            <li>
                                                <a href="#" id='addSafeArea'>添加危险区</a>
                                            <li>
                                                <a href="#" id='cancelEdit'>退出</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <!--警示灯-->
                                <div id="alertLightOn" style="display:none;" class="alertLightOn"></div>
                                <div id="alertLightOff" class="alertLightOff"></div>
                            </div>
                        </section>
                        <!-- /.content -->
                    </aside>
                    <!-- /.right-side -->
                </div>
            </div>
            <div class="tab-pane " id="user">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>用户</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <!-- jQuery 2.0.2 -->
        <script src="js/jquery.js"></script>
        <!-- Bootstrap -->
        <script src="js/bootstrap.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="js/AdminLTE/app.js" type="text/javascript"></script>
        <!--zTree的东西-->
        <link href="css/zTree/zTreeStyle.css" rel="stylesheet"/>
        <script src="js/zTree/jquery.ztree.all.min.js"></script>
        <!--Turf地理分析-->
        <script src='js/turf.js'></script>
        <!--Openlayer的东西-->
        <link href="js/openLayers/ol.css" rel="stylesheet" type="text/css"/>
        <script src="js/openLayers/ol.js" type="text/javascript"></script>
        <!--layer浮窗-->
        <SCRIPT src="js/layer/layer.js" type="text/javascript"></SCRIPT>
        <!---------------地图的东西-------------------------->
        <link href="css/map/map.css" rel="stylesheet" type="text/css"/>
        <script src="js/map/map.js"></script>
        <!--OpenLayer与zTree联动控制图层-->
        <SCRIPT src="js/zTree/layerTree.js" type="text/javascript"></SCRIPT>
        <SCRIPT src="js/zTree/peopleTree.js" type="text/javascript"></SCRIPT>
        <script>

            //登录控制
            $(function() {
                if (getCookie("username") == "") {
                    window.location.href = "login.html";
                }

                $("#unlogin").click(function() {
                    document.cookie = "username =;";
                    window.location.href = "login.html";
                })
            });
            function getCookie(cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i].trim();
                    if (c.indexOf(name) == 0)
                        return c.substring(name.length, c.length);
                }
                return "";
            }

            $(()=>{
                //加载用户表到 导航-用户
                $.post("HttpHandler/loginHandler.ashx", {
                    "action": "queryuser"
                }, function(data) {
                    var str = '';
                    for (var i = 0; i < data.length; i++) {
                        str += "<tr>";
                        str += "<td>" + (i + 1) + "</td>";
                        str += "<td>" + data[i].username + "</td>";
                        str += "</tr>";

                    }
                    $("#user tbody").empty();
                    $("#user tbody").append(str);

                }, "json");

            }
            );
        </script>
    </body>
</html>
